<template>
    <div class="message-container" ref="messageContainer" @scroll="handleScroll">
       <MessageAreaIndex
        title="留言板"
        :sub-title="`(${dataRef?.total})`"
        :is-list-loading="isLoadingRef"
        :list="dataRef?.rows"
        @submit="handleSumbit"
       >

       </MessageAreaIndex>
    </div>
</template>
<script setup lang='ts'>
import MessageAreaIndex from '~@/components/MessageArea/MessageAreaIndex.vue';
import { apiGetMessages,apiPostMessage } from '~@/api/message';
import { vLoad } from '~@/directives/loading/loadingDirective';
import { computed, onMounted, ref } from 'vue';
import { TypeApiCommentI, TypeApiCommentPageI, TypeFormData } from '~@/api/apiTypes';
import { $bus, bindMainScrollEvent,bindSetScrollEvent } from '~@/bus/busIndex';
// import { vLoadImageLazy } from '~@/directives/imagelazy/imageLazy';
const isLoadingRef=ref(true);
const dataRef=ref<TypeApiCommentPageI>();
const messageContainer=ref<HTMLElement>()

const pageRef=ref(1);

onMounted(async ()=>{
    isLoadingRef.value=true;
    dataRef.value= await apiGetMessages(pageRef.value);
    isLoadingRef.value=false;

})

const hasMore=computed(()=>{
    if(dataRef.value){
        return dataRef.value.total>dataRef.value.rows.length;
    }else{
        return false;
    }
})

const fetchMore=async ()=>{
    if(hasMore.value){
        pageRef.value++;
        isLoadingRef.value=true;
        const page= await apiGetMessages(pageRef.value);
        dataRef.value!.total=page.total;
        dataRef.value!.rows=dataRef.value!.rows.concat(page.rows);
        isLoadingRef.value=false;
    }
    
}
const handleScroll=()=>{
    const dom=messageContainer.value;
    if (isLoadingRef.value || !dom) {
        // 目前正在加载更多
        return;
      }
      const range = 100; // 顶一个可接受的范围，在这个范围内都算达到了底部
      const dec = Math.abs(dom.scrollTop + dom.clientHeight - dom.scrollHeight);
      if (dec <= range) {
        fetchMore();
      }

      $bus.emit('mainScroll',dom);
}





const handleSumbit=async (formData: TypeFormData, callback: Function)=>{
    isLoadingRef.value=true;
    const resp= await apiPostMessage(formData);
    dataRef.value?.rows.unshift(resp);
    isLoadingRef.value=false;
    callback('感谢留言');
}


bindSetScrollEvent((scrollTop)=>{
    if(messageContainer.value){
        messageContainer.value.scrollTop=scrollTop;
    }
})


    ////#region defineXxx
    //defineOptions({
        //name:
    //});

    //const props=defineProps({
        //propA:{
            //type:String,
            //required:true
        //},
        //propB:{
            //type:Number,
            //default:1
        //},
        //propC:{
            //type:String as PropType<MyType>,
            //required:true
        //},
    //});

    //const emit = defineEmits<{
        //event1:[para1:number,para2:string],
        //event2:[para1:number,para2:string],
    //}>();
    ////#endregion
    
    
</script>
<style lang='less' scoped>
.message-container {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding: 25px 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
}
.message-area-container {
  width: 700px;
  margin: 0 auto;
}  
</style>